import 'package:flutter/material.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'package:rabbit_mobile/widget/custom_cache_image_widget/index.dart';

class Mainpicture extends StatefulWidget {
  final List<String> list;
  const Mainpicture({super.key, required this.list});

  @override
  State<Mainpicture> createState() => _MainpictureState();
}

class _MainpictureState extends State<Mainpicture> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 300,
      child: widget.list.isNotEmpty
          ? Swiper(
              itemCount: widget.list.length,
              itemBuilder: (BuildContext context, int index) {
                String mainPictures = widget.list[index];
                return CustomCacheImageWidget(
                  circle: 0,
                  imageUrl: mainPictures,
                );
              },
              autoplay: true,
              scrollDirection: Axis.horizontal,
              pagination: SwiperPagination(
                alignment: Alignment.bottomRight,
                builder: CustomSwiperPagination(),
              ),
            )
          : Container(
              decoration: const BoxDecoration(color: Colors.tealAccent),
            ),
    );
  }
}

class CustomSwiperPagination extends SwiperPlugin {

  @override
  Widget build(BuildContext context, SwiperPluginConfig config) {
    return Container(
      width: 44,
      height: 16,
      alignment: Alignment.center,
      decoration: const BoxDecoration(
        color: Color(0xFF00CE8A),
        borderRadius: BorderRadius.all(Radius.circular(10))
      ),
      child: Text("${config.activeIndex + 1} / ${config.itemCount}", style: TextStyle(color: Colors.white, fontSize: 10),)
    );
  }
}
